<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="Bootstrap/css/bootstrap.min.css">
<script src="Bootstrap/js/jquery-1.11.1.min.js"></script>
<script src="Bootstrap/js/bootstrap.min.js"></script>

	<script type="text/javascript">
        $(function () {
			var name = $("#name").val();
			var realName = $("#realName").val();
			var phone = $("#phone").val();
			var addresss = $("#addresss").val();
			$(".name").html(JSON.parse(localStorage.user).name);
			//$(".realName").html(JSON.parse(localStorage.user).name);
			$(".phone").html(JSON.parse(localStorage.user).phone);
			$(".address").html(JSON.parse(localStorage.user).address);

			//var user = JSON.parse(localStorage.user);
        });
</script>
		
<style type="text/css">
body,html {
	font-family: "微软雅黑";
	color: gray;
}
#myModalLabel{
margin-left: 42%;
}
.bottom-menu {
	border-top: 1px solid #D3D3D3;
	margin: 0 auto;
	position: fixed;
	bottom: 0;
	text-align: center;
	background: #33CCCC;
}

.bottom-menu td {
	padding-top: 6px;
	font-size: 13px;
	height: 50px;
	width: 200px;
}


.my-center {
	background: #B22222;
	text-align: center;
}

.my-head {
	height: 80px;
	width: 80px;
	border-radius: 80px;
	border: 2px solid #66ffff;
	margin-left: 38%;
}

.head {
	padding-top: 10px;
	margin-left: 0;
	text-align: left;
	line-height: 25px;
	height: 90px;
}
.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover {
	background-color: #33CCCC;
	border: 0px;
}

.bottom-menu a {
	color: #ffffff;
}
/* 我的信息 */
.my-info {
	width: 80%;
	matgin-top:40px;
}
.glyphicon-chevron-right{
float: right;
}.basic-info{
text-align: center;
}
.modal-content{
margin-top: 90px;
}
</style>
</head>
<body>
	<!--列表组-->
	<div style="background: url('images/3.jpg');">
	<a class="list-group-item active my-center"> 个人中心</a>
	<div class="head"><a data-toggle="modal" data-target="#myModal" href="#">
		<img src="" id="myImg" class="my-head" /></a></div><br>
	<div class='basic-info' id="myName"></div><br>
	</div>
	<script>
		$(function () {
			var user = JSON.parse(localStorage.user);
			if(user == null) {
				location.href = "login.html";
			}else{
				$("#myName").text(user.name);
				$("#myImg").attr({src: "http://localhost:8080"+user.photo});
			}
		})
	</script>
	<!-- 菜单列表 -->
	<div style="height:40px;">
		<a class="list-group-item" href="my.html">
			  <span class="glyphicon glyphicon-home"></span>
		我的主页<span class="icon_right glyphicon glyphicon-chevron-right" ></span>
		</a>
		
		<a data-toggle="modal" data-target="#myModal" href="#" class="list-group-item">
			  <span class="glyphicon glyphicon-user"></span>
		个人资料<span class="icon_right glyphicon glyphicon-chevron-right" ></span>
		</a>
		
		<!--<a class="list-group-item" href="#">
			  <span class="glyphicon glyphicon-star"></span>
		我的收藏<span class="icon_right glyphicon glyphicon-chevron-right" ></span>
		</a>-->
		
		<a data-toggle="modal" data-target="#myModal1" href="#" class="list-group-item">
			  <span class="glyphicon glyphicon-headphones"></span>
		服务中心<span class="icon_right glyphicon glyphicon-chevron-right" ></span>
		</a>
		
		<a class="list-group-item" href="login.html">
			  <span class="glyphicon glyphicon-circle-arrow-right"></span>
		切换账号<span class="icon_right glyphicon glyphicon-chevron-right" ></span>
		</a>
		
		<a class="list-group-item" href="set.html">
			  <span class="glyphicon glyphicon-cog"></span>
		设置<span class="icon_right glyphicon glyphicon-chevron-right" ></span>
		</a>
		
	</div>
	
	<!--底部导航菜单开始-->
	<div class="bottom-menu">
		<table>
			<tr>
				<td><a href="index.html"><span
						class="glyphicon glyphicon-home"></span> <br>首页</a></td>
				<td><a href="release.html"><span
						class="glyphicon glyphicon-pencil"></span><br>我要发布</a></td>
				<td><a href="my_collect.html"><span
						class="glyphicon glyphicon-star"></span><br>我的收藏</a></td>
				<td><a href="mypage.html" style="color:#66ffff;"><span
						class="glyphicon glyphicon-th-list"></span><br>个人中心</a></td>
			</tr>
		</table>
	</div>
	<!--底部导航菜单结束-->

	<!-- 我的信息资料 -->
	<!-- 模态框（Modal） -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;</button>
					<h4 class="modal-title" id="myModalLabel" >个人资料</h4>
				</div>
				<div class="modal-body">
					<ul class="list-group">
						<li class="list-group-item">账号：<span class="name"></span></li>
						<li class="list-group-item">姓名：<span class="realName"></span></li>
						<li class="list-group-item">性别：<span class="sex"></span></li>
						<li class="list-group-item">手机号：<span class="phone"></span></li>
						<!--<li class="list-group-item">邮箱：<span class="email"></span></li>
						<li class="list-group-item">学校：<span class="school"></span></li>-->
						<li class="list-group-item">地址：<span class="address"></span></li>
					</ul>
				</div>
			</div>
		</div>
		<!-- /.modal -->
	</div>
	<!-- 我的资料结束 -->

	<!-- 模态框（Modal） -->
	<div class="modal fade" id="myModal1" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">服务中心</h4>
				</div>
				<div class="modal-body" style="height: 350px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					当前系统版本为测试版本1.11<br> <br> &nbsp;&nbsp;&nbsp;&nbsp;1.本系统使用APPCAN打包，适用于安卓手机！<br>
					<br> 
					&nbsp;&nbsp;&nbsp;&nbsp;2.问题反馈：<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;邮箱：<a href="email:995716523@qq.com">995716523@qq.com</a><br /> <br>
					 &nbsp;&nbsp;&nbsp;&nbsp;3.投诉电话：<a href="tel:17868803025">17868803025</a><br />
					<br>
					</div>
			</div>
		</div>
		<!-- /.modal -->
	</div>
	<!-- 帮助中心结束 -->
</body>
</html>